Dynamic Drive DHTML Scripts- Drop Down Menu

Home

Menus & navigation systems

Here

Drop down menu Script All

Credits: Dynamic Drive

Description: A folding menu tree that contains links and sublinks. Click on the folder icon to expand it. Browsers apart from IE 4.x will see the tree fully expanded (degrades well). This menu script uses session cookies to give it persistance. In the past, whenever you opened a folder and clicked a link inside, when you returned, the folder reverts back to its initial, closed state. What a waste of time of having to reopen the folder(s) each time you return to view the links inside. Using cookies, this "smart" folder script will actually remember the state of the folder tree when you navigate to another page, so when you come back, it will look just the way you had remembered it to be. If you can't appreciate this feature, you can bet your surfers will!
Note: This persistance feature is only visible in, obviously, cookie enabled IE 4 browsers.

Demo: (try opening folders, navigate away, and return...the folders will still be open!)

Click here

Directions

Step 1: Copy the below images onto your HD by right clicking them and choosing "save as":

Step 2: Insert the following code into the <head> section of your page:

Step 3: Insert the following into the <body> section of your page where you want the folder tree to appear. This contains the html codes you should edit to change the links to your own:

<div><img src="fold.gif"><span id="folding"> News</span> <ul style="list-style-image:url(list.gif);display:none" style=&{head};> <li><a href="http://www.cnn.com">CNN</a></li> <li><a href="http://www.abcnews.com">ABC News</a></li> <li><a href="http://www.vancouversun.com">Vancouver Sun</a></li> </ul> </div> <div><img src="fold.gif"><span id="folding"> Games</span> <ul style="list-style-image:url(list.gif);display:none" style=&{head};> <li><a href="http://www.gamespot.com">GameSpot</a></li> <li><a href="http://www.happypuppy.com">Happy Puppy</a></li> <li><a href="http://www.gamecenter.com">Game Center</a></li> </ul> </div> <div><img src="fold.gif"><span id="folding"> Softwares</span> <ul style="list-style-image:url(list.gif);display:none" style=&{head};> <li><a href="http://www.download.com">Download.com</a></li> <li><a href="http://www.hotfiles.com">ZDnet Software</a></li> <li><a href="http://www.windows95.com">Windows95.com</a></li> <li><a href="http://www.shareware.com">Shareware.com</a></li> </ul> </div>

Step 4: Finally, insert the below script following the above HTML code (It should never preceed it). Note that this is the "persistance" script, and if you're really stubborn-headed and do not want persistance in your folders, just don't add the below code!

Adding additional "main" links or sublinks to a menu is trivial. To add additional main links (ie News), simply insert more of the following to the above code:

To add more sublinks to any main link, insert more of the following to the link:

<li><a href="fdddf">Link 1c</a></li>

Be sure to change the dead link to a working one.

About

Help Hot Line

Having trouble getting the current script on this page to work? Found a bug? Help is on the way!

Submit a script!

Think you've created a great DTHML script and would like the world to share it? Click here for submission details.

Link to us!

If you find this script useful, we would greatly appreciate a link back to us. Click on the below graphic for details.